<template>
  <div class="track_the_playback">
    <div class="around">
      <!-- 选择车辆类型 -->
      <!-- <i class="el-icon-speed" title="车辆类型">车辆类型</i>
      <el-select v-model="carTypeValue" placeholder="请选择车辆类型"  @change="screenCarList">
      <el-option
        v-for="(item,index) in selectCarType"
        :value="item.label"
        :label="item.value"
        :key="index"
      ></el-option>
      </el-select> -->
      <!-- 选择车辆 -->
      <i class="el-icon-speed" title="车辆名称">车辆名称</i>
      <el-select
        v-model="selectCarVID"
        placeholder="请选择车辆"
        ref="workcarname"
        @change="changVID"
        filterable
        clearable
      >
        <el-option
          v-for="(item, index) in optionCarList"
          :label="item.LICENSE_PLATE"
          :value="item.VID"
          :key="index"
        ></el-option>
      </el-select>
      <!-- 数据列表 -->
      <i
        class="el-icon-kaishi buttonI"
        title="途径垃圾点位详情"
        @click="openRubbishPointsList"
        >途径垃圾点位详情</i
      >
      <!-- 测距按钮 -->
      <i
        class="el-icon-kaishi buttonI"
        title="测距按钮"
        @click="setDistance"
        >测距按钮</i
      >
    </div>
    <!-- 地图 -->
    <div class="container" style="padding: 0px">
      <div id="map"></div>
    </div>
    <!-- 弹出框 垃圾点位详情列表 -->
    <el-dialog
      title="途径垃圾点位详情"
      :visible.sync="rubbishPointDetailDialogShow"
      width="60%"
    >
      <el-table :data="dataRubbishPoints">
        <el-table-column
          prop="车辆名称"
          label="车辆名称"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="PointName"
          label="点位名称"
          align="center"
        ></el-table-column>
        <el-table-column
          :formatter="formatterYJTime"
          label="预计到达时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="Wtime"
          label="预计停留时间"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="STARTTIME"
          label="实际到达时间"
          align="center"
        ></el-table-column>
        <el-table-column
          :formatter="formatterRealTime"
          label="实际作业时长（秒）"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="TS"
          label="收运桶数"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="ZL"
          label="收运重量"
          align="center"
        ></el-table-column>
        <el-table-column label="收运照片" width="100px" align="center">
              <template slot-scope="scope">
                <el-image
                  style="width: 45px; height: 45px; margin-top: 5px;"
                  :src="scope.row.SRC"
                  @click="bigImage(scope.row)"
                >
                <div slot="error" class="image-slot" style="margin-top: 10px">
                  <i class="el-icon-picture-outline"></i>
                 </div>
                </el-image>
              </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="rubbishPointDetailDialogShow = false"
          >取 消</el-button
        >
        <!-- <el-button type="primary" @click="rubbishPointDetailDialogShow = false">确 定</el-button> -->
      </span>
    </el-dialog>

    <!-- 图片放大 -->
    <el-dialog
      title="图片展示"
      :visible.sync="showBigDialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-image
        style="width: 100%; height: 100%"
        :src="srcBig"
      ></el-image>
    </el-dialog>
  </div>
</template>

<script>
import MapStr from '@/main.js'
// import tool from '@/Tool.js'
import { newMap } from '@/common/js/map.js'
import imgMarkerCLC from '@/assets/img/marker/markerImageCLC.png'
import imgMarkerRubbishPoint from '@/assets/img/marker/rubbishMarker1.png'
import startPlan from '@/assets/img/marker/STplan.png'
import startReal from '@/assets/img/marker/STreal.png'
import endPlan from '@/assets/img/marker/ENDplan.png'
import endReal from '@/assets/img/marker/ENDreal.png'
// import { filter } from 'vue/types/umd'
export default {
  data () {
    return {
      map: null,
      mapCursor: null,
      mapZoom: 20,
      selectCarVID: '',
      carName: '',
      optionCarList: [],
      dataPlannedRoute: [],
      dataRealRoute: [],
      dataRubbishPoints: [],
      dataRubbishPointsReal: [],
      clcList: [],
      rubbishPointDetailDialogShow: false,
      MapV: {
        dataSetPlan: null,
        dataSetReal: null,
        dataSetPoint: null,
        mapVPlan: null,
        mapVReal: null,
        mapVPointIcon: null,
        mapVPointText: null
      },
      markerStartPlan: null,
      markerStartReal: null,
      markerEndPlan: null,
      markerEndReal: null,
      showBigDialogVisible: false
    }
  },
  mounted () {
    this.selectCarVID = this.$route.query.VID

    // 显示地图
    this.mapShow()
    this.getClcList()
    if (this.selectCarVID) {
      this.getCarList(true)
      this.carName = this.$route.query.carName
      this.changVID()
    } else {
      this.getCarList(false)
    }
  },
  methods: {
    formatterYJTime (row) {
      return row.Stime + ' - ' + row.Etime
    },
    formatterRealTime (row) {
      if (row.WtimeR) {
        return row.WtimeR
      } else {
        return '未收运'
      }
    },
    // 放大图片
    bigImage (row) {
      this.srcBig = row.SRC
      this.showBigDialogVisible = true
    },
    // 获取已规划车辆列表
    async getCarList (isTableTurn) {
      var url = 'DataListCompany/GetVehicleRubbishPlan'
      const { data } = await this.$Http.get(url)
      this.optionCarList = data
      if (!isTableTurn) {
        this.selectCarVID = data[0].VID
        this.carName = data[0].LICENSE_PLATE
        this.changVID()
      }
    },
    changVID () {
      this.getDataPlannedRoute()
      this.getDataRealRoute()
    },
    // 获取计划轨迹路线
    async getDataPlannedRoute () {
      var url = 'DataListCompany/GetVehicleRubbishPlanLine?workdate=2021-11-01&vid=' + this.selectCarVID
      console.log(url)
      const { data } = await this.$Http.get(url)
      this.dataRubbishPoints = [
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '中石油',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '0',
          LONGITUDE: '117.726695955379',
          LATITUDE: '39.0273466381199',
          STARTTIME: '15:31',
          WtimeR: '1778',
          TS: '1',
          ZL: '2.4KG',
          SRC: 'http://picture-adv-hb2.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220830144742.bmp'
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '一汽丰田3',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '1',
          LONGITUDE: '117.742158636442',
          LATITUDE: '39.0611554340182',
          STARTTIME: '17:51',
          WtimeR: '437',
          TS: '2',
          ZL: '122.4KG',
          SRC: 'http://picture-adv-hb2.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220830161051.bmp'
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '一汽丰田2',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '2',
          LONGITUDE: '117.736436946363',
          LATITUDE: '39.0627134451992',
          STARTTIME: '18:11',
          WtimeR: '198',
          TS: '1',
          ZL: '17.3KG',
          SRC: 'http://picture-adv-hb2.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220830144811.jpg'
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '泰达小学',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '3',
          LONGITUDE: '117.726713683873',
          LATITUDE: '39.0436889625798',
          STARTTIME: '16:04',
          WtimeR: '99',
          TS: '2',
          ZL: '22.4KG',
          SRC: 'http://picture-adv-hb2.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220830144816.jpg'
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '斯坦雷电气',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '4',
          LONGITUDE: '117.714454899339',
          LATITUDE: '39.0523421050121',
          STARTTIME: '18:47',
          WtimeR: '2899',
          TS: '1',
          ZL: '35.1KG',
          SRC: 'http://picture-adv-hb2.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220830144822.bmp'
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '赛威传动（七大街）',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '5',
          LONGITUDE: '117.720525165856',
          LATITUDE: '39.054128406013',
          STARTTIME: '16:19',
          WtimeR: '',
          TS: '',
          ZL: '',
          SRC: ''
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '三环乐喜1',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '6',
          LONGITUDE: '117.727091100723',
          LATITUDE: '39.0738976533631',
          STARTTIME: '17:26',
          WtimeR: '199',
          TS: '2',
          ZL: '78.3KG',
          SRC: 'http://picture-adv-hb2.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220830144811.jpg'
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '一汽丰田1',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '7',
          LONGITUDE: '117.736689118956',
          LATITUDE: '39.0613399366797',
          STARTTIME: '17:47',
          WtimeR: '397',
          TS: '1',
          ZL: '28.3G',
          SRC: 'http://picture-adv-hb2.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220830144742.bmp'
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '通用半导体',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '8',
          LONGITUDE: '117.723011612081',
          LATITUDE: '39.048348698592',
          STARTTIME: '16:10',
          WtimeR: '377',
          TS: '1',
          ZL: '2.4KG',
          SRC: 'http://picture-adv-hb2.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220830144822.bmp'
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '一汽丰田6',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '9',
          LONGITUDE: '117.732763851414',
          LATITUDE: '39.0673691418317',
          STARTTIME: '17:31',
          WtimeR: '',
          TS: '',
          ZL: '',
          SRC: ''
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '邦迪汽车',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '10',
          LONGITUDE: '117.725820675551',
          LATITUDE: '39.0617525388359',
          STARTTIME: '16:56',
          WtimeR: '520',
          TS: '2',
          ZL: '37.2KG',
          SRC: 'http://picture-adv-hb2.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220830144816.jpg'
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '安为佳快餐',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '11',
          LONGITUDE: '117.729853135727',
          LATITUDE: '39.0659981284498',
          STARTTIME: '17:07',
          WtimeR: '675',
          TS: '1',
          ZL: '32.4KG',
          SRC: 'http://picture-adv-hb2.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220830144806.jpg'
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '博爱（中国）膨化',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '12',
          LONGITUDE: '117.720085140807',
          LATITUDE: '39.0571592565503',
          STARTTIME: null,
          WtimeR: null,
          TS: '',
          ZL: '',
          SRC: ''
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '一汽丰田5',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '13',
          LONGITUDE: '117.731041758807',
          LATITUDE: '39.065226658879',
          STARTTIME: '17:07',
          WtimeR: '794',
          TS: '2',
          ZL: '12KG',
          SRC: 'http://picture-adv-hb2.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220830144811.jpg'
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '一汽丰田4',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '14',
          LONGITUDE: '117.731972831555',
          LATITUDE: '39.0623203267462',
          STARTTIME: '17:42',
          WtimeR: '278',
          TS: '1',
          ZL: '2.4KG',
          SRC: 'http://picture-adv-hb2.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220830144822.bmp'
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '凯莱英生命科学',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '15',
          LONGITUDE: '117.735815773631',
          LATITUDE: '39.0515718256635',
          STARTTIME: '18:24',
          WtimeR: '934',
          TS: '1',
          ZL: '7.8KG',
          SRC: 'http://picture-adv-hb2.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220830144742.bmp'
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '诺维信',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '16',
          LONGITUDE: '117.717350714653',
          LATITUDE: '39.0603503988487',
          STARTTIME: '16:38',
          WtimeR: '890',
          TS: '',
          ZL: '',
          SRC: ''
        },
        {
          ID: '16',
          车辆名称: '津C52866',
          PointName: '丰爱汽车',
          PointID: null,
          NAME: null,
          Stime: '05:00',
          Etime: '23:00',
          Wtime: '600',
          Atime: '',
          Number: '17',
          LONGITUDE: '117.734895823968',
          LATITUDE: '39.0735872681653',
          STARTTIME: '17:17',
          WtimeR: '338',
          TS: '1',
          ZL: '23KG',
          SRC: 'http://picture-adv-hb2.oss-cn-beijing.aliyuncs.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20220830144806.jpg'
        }
      ]
      this.dataRubbishPointsReal = data[0].PlanLinePoints
      this.drawRubbishPoints()
      // this.drawRubbishPoints()
      this.dataPlannedRoute = data[0].planLines
      this.drawPicture()
    },
    // 获取实际垃圾点位
    async getRubbishPointsReal () {
      var url = 'DataListCompany/GetRubbishPointsReal?workdate=2021-11-01&carName=' + this.carName
      console.log(url)
      const { data } = await this.$Http.get(url)
      this.dataRubbishPointsReal = data
      this.drawRubbishPoints()
      // this.dataPlannedRoute = data[0].planLines;
      // this.drawPicture()
    },
    // 获取处理厂列表
    async getClcList () {
      const { data } = await this.$Http.get('/RubbishVehicle/getPlaceCLC?ClientNo=' + localStorage.getItem('CLIENT_NO'))
      this.clcList = data
      this.drawCLCPoints()
    },
    // 获取实际轨迹路线
    async getDataRealRoute () { // 16232
      const params = {
        VID: this.selectCarVID,
        // VID: 17050,
        startTime: '2021-11-01 00:00:00',
        endTime: '2021-11-01 23:59:59'
        // startTime: tool.formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd') + ' 00:00:00',
        // endTime: tool.formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd') + ' 23:59:59'
      }
      // console.log(params)
      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
      const { data } = await this.$Http.get('DataListCompany/GetVehicleHistoryInfoListApi', { params })
      loading.close()
      if (data.length != 0) {
        this.dataRealRoute = data
        this.drawPictureReal()
      } else {
        this.$message.error('未获取到轨迹')
      }
    },
    // 画途经垃圾点位
    drawRubbishPoints () {
      const _self = this

      const img = new Image()
      img.src = imgMarkerRubbishPoint
      img.onload = function () {
        // 循环加载同一张图片的车辆数据
        const arrayImage = _self.dataRubbishPointsReal.map(v => {
          v.geometry = {
            type: 'Point',
            coordinates: [v.LONGITUDE, v.LATITUDE]
          }
          v.icon = img
          v.text = v.Number + ' ' + v.PointName
          return v
        })
        if (_self.MapV.dataSetPoint) {
          _self.MapV.dataSetPoint.set(arrayImage)
        } else {
          _self.MapV.dataSetPoint = new mapv.DataSet(arrayImage)
          const optionsICON = {
            draw: 'icon',
            width: 28, // 规定图像的宽度
            height: 32, // 规定图像的高度
            offset: { // 偏移值
              x: 0,
              y: 25
            }
          }

          const optionsTEXT = {
            draw: 'text',
            size: 14,
            avoid: true, // 开启文本标注避让
            textBaseline: 'middle',
            offset: { // 文本便宜值
              x: 0,
              y: 50
            }
          }
          new mapv.baiduMapLayer(_self.map, _self.MapV.dataSetPoint, optionsICON)
          new mapv.baiduMapLayer(_self.map, _self.MapV.dataSetPoint, optionsTEXT)
        }
      }
    },
    // 画处理厂点位
    drawCLCPoints () {
      const _self = this

      const img = new Image()
      img.src = imgMarkerCLC
      img.onload = function () {
        // 循环加载同一张图片的车辆数据
        const arrayImage = _self.clcList.map(v => {
          v.geometry = {
            type: 'Point',
            coordinates: [v.LONGITUDE, v.LATITUDE]
          }
          v.icon = img
          v.text = v.NAME
          return v
        })
        // if (_self.MapV.dataSetPoint) {
        //   _self.MapV.dataSetPoint.set(arrayImage);
        // } else {
        var dataSetCLC = new mapv.DataSet(arrayImage)
        const optionsICON = {
          draw: 'icon',
          width: 40, // 规定图像的宽度
          height: 40, // 规定图像的高度
          offset: { // 偏移值
            x: 0,
            y: 15
          }
        }

        const optionsTEXT = {
          draw: 'text',
          size: 14,
          avoid: true, // 开启文本标注避让
          textBaseline: 'middle',
          offset: { // 文本便宜值
            x: 0,
            y: 50
          }
        }
        new mapv.baiduMapLayer(_self.map, dataSetCLC, optionsICON)
        new mapv.baiduMapLayer(_self.map, dataSetCLC, optionsTEXT)
        // }
      }
    },
    // 画车辆轨迹
    drawPicture () {
      var pointArr = []
      var boundPointsP = []

      for (var i = 0; i < this.dataPlannedRoute.length; i++) {
        for (var j = 0; j < this.dataPlannedRoute[i].Polyline.length; j++) {
          var item = this.dataPlannedRoute[i].Polyline[j]
          pointArr.push([item.LONGITUDE, item.LATITUDE])
          boundPointsP.push(new BMap.Point(item.LONGITUDE, item.LATITUDE))
        }
      }
      this.map.setViewport(boundPointsP)

      if (!this.markerStartPlan) {
        // 创建Marker标注，使用小车图标
        this.markerStartPlan = new BMap.Marker(boundPointsP[0], { icon: new BMap.Icon(startPlan, new BMap.Size(40, 40)) })
        this.markerEndPlan = new BMap.Marker(boundPointsP[boundPointsP.length - 1], { icon: new BMap.Icon(endPlan, new BMap.Size(40, 40)) })
        this.map.addOverlay(this.markerStartPlan)
        this.map.addOverlay(this.markerEndPlan)
      } else {
        this.markerStartPlan.setPosition(boundPointsP[0])
        this.markerEndPlan.setPosition(boundPointsP[boundPointsP.length - 1])
      }

      if (this.MapV.dataSetPlan) {
        this.MapV.dataSetPlan.set({
          geometry: {
            type: 'LineString',
            coordinates: pointArr
          }
        })
      } else {
        this.MapV.dataSetPlan = new mapv.DataSet({
          geometry: {
            type: 'LineString',
            coordinates: pointArr
          }
        })

        var options = {
          zIndex: -1,
          strokeStyle: 'rgba(0,0,255,0.6)', // 47,79,79
          lineWidth: 4,
          lineJoin: 'round',
          draw: 'simple'
        }
        new mapv.baiduMapLayer(this.map, this.MapV.dataSetPlan, options)
      }
    },
    drawPictureReal () {
      var pointArr = []
      var boundPoints = []
      for (var i = 0; i < this.dataRealRoute.length; i++) {
        // for (var j = 0; j < this.dataRealRoute[i].Polyline.length; j++) {
        var item = this.dataRealRoute[i]
        pointArr.push([item.Lng, item.Lat])
        boundPoints.push(new BMap.Point(item.Lng, item.Lat))
        // }
      }
      this.map.setViewport(boundPoints)

      if (!this.markerStartReal) {
        // 创建Marker标注，使用小车图标
        this.markerStartReal = new BMap.Marker(boundPoints[0], { icon: new BMap.Icon(startReal, new BMap.Size(40, 40)) })
        this.markerEndReal = new BMap.Marker(boundPoints[boundPoints.length - 1], { icon: new BMap.Icon(endReal, new BMap.Size(40, 40)) })
        this.map.addOverlay(this.markerStartReal)
        this.map.addOverlay(this.markerEndReal)
      } else {
        this.markerStartReal.setPosition(boundPoints[0])
        this.markerEndReal.setPosition(boundPoints[boundPoints.length - 1])
      }

      if (this.MapV.dataSetReal) {
        this.MapV.dataSetReal.set({
          geometry: {
            type: 'LineString',
            coordinates: pointArr
          }
        })
      } else {
        this.MapV.dataSetReal = new mapv.DataSet({
          geometry: {
            type: 'LineString',
            coordinates: pointArr
          }
        })
        var options = {
          zIndex: -1,
          strokeStyle: 'rgba(255,0,0,0.6)', // 47,79,79
          lineWidth: 4,
          lineJoin: 'round',
          draw: 'simple'
        }
        new mapv.baiduMapLayer(this.map, this.MapV.dataSetReal, options)
      }
    },
    openRubbishPointsList () {
      this.rubbishPointDetailDialogShow = true
    },
    setDistance () {
      if (!this.mapCursor) {
        this.mapCursor = new BMapLib.DistanceTool(this.map)
      }
      if (this.mapCursor.isOpen) {
        // 结束测量
        this.mapCursor.close()
      } else {
        // 开始测量
        this.mapCursor.open()
      }
    },
    // setDistance () {
    //   const _this = this;
    //   // 添加地图监听事件：双击地图
    //   this.map.addEventListener('click', function (e, target) {
    //     if (_this.mapCursor === 'crosshair') {
    //       document.getElementById("resultMap").innerHTML="Hello World";
    //       console.log(e.point.lng.toFixed(5) + ','+ e.point.lat.toFixed(5))
    //     }
    //     // _this.map.setCenter(e.point);
    //     // _this.marker.setPosition(e.point);
    //     // _this.$set(_this.form, 'LONGITUDE', e.point.lng.toFixed(5))
    //     // _this.$set(_this.form, 'LATITUDE', e.point.lat.toFixed(5))
    //   })
    //   if (this.mapCursor === 'crosshair') {
    //     this.mapCursor = "auto"
    //   } else {
    //     this.mapCursor = "crosshair"
    //   }
    //   this.map.setDefaultCursor(this.mapCursor);
    // },
    // 显示地图
    mapShow () {
      // 百度地图API功能
      this.map = newMap()
      this.map.centerAndZoom(new BMap.Point(localStorage.getItem('LNG'), localStorage.getItem('LAT')), this.mapZoom)// 初始化地图,设置中心点坐标和地图级别

      var cr = new BMap.CopyrightControl({
        anchor: BMAP_ANCHOR_TOP_RIGHT,
        offset: new BMap.Size(20, 20)
      }) // 设置版权控件位置
	    this.map.addControl(cr) // 添加版权控件
	    cr.addCopyright({
        id: 1,
        content: "<div id='resultMap' >测量结果<p>这是一个段落。</p></div>"
        // content: "<img src='../img/baidu.jpg' width='50px' height='50px'/><a href='#' style='font-size:16px;color:#000'>@我是自定义版权控件呀</a>",
      })
    }
  }
}
</script>

<style scoped lang="less">
.track_the_playback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .around {
    padding: 10px 100px;
    height: 40px;
    background-color: #007acc;
    &:first-child {
      padding-left: 10px;
      height: 30px;
      // line-height: 30px;
      i {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        //width: 30px;
        height: 30px;
        line-height: 28px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 15px;
      }
      // .el-icon-s-operation {
      //   font-size: 22px;
      // }
    }
  }
  .container {
    flex: 1;
    #map {
      height: 100%;
      width: 100%;
    }
  }
}
.buttonI {
  border: 1px solid #fff;
  padding: 0px 8px;
  border-radius: 6px;
  margin-left: 15px;
}
</style>
